<!-- 老板 – 我的 – 所在团队 – 管理员设置 – 4		control -->
<template>
	<view class="wraps">
		<view class="control-top">
			<view class="w90">
				<view class="f b c" v-for="(item,index) in list" :key="index">
					<view>
						<text :class="item.txt == true?'blue':''" class="bold" >全部部门</text>
					</view>
					<view>
						<!-- <input type="radio" :id="index" :value="index" v-model="change" /> -->
						<label class="radio">
							<radio value="" :checked="item.txt" @click="getChecked(index)" color="#0055ff" />
						</label>
					</view>
				</view>
				<view class="xian m_t_40"></view>
			</view>
			<view class="w90">
				<view>
					<view class="f b c p_t_10">
						<view>
							<text>所在部门及下级部门</text>
						</view>
						<view></view>
					</view>
					<view class="xian m_t_30"></view>
				</view>
				<view @click="get()">
					<view class="f b c p_t_31">
						<view>
							<text>选择部门</text>
						</view>
						<view>
							<image style="width: 24rpx;height: 24rpx;" src="../../../../static/img/125.png" mode="">
							</image>
						</view>
					</view>
					<view class="xian m_t_30"></view>
				</view>
			</view>
			<view v-if="show == true" style="position:relative;">
				<view class="teaching-lan">
					<view>
						<view class=" senter p_t_20">
							<text>部门1</text>
						</view>
						<view class="quanxiana"></view>
					</view>
					<view>
						<view class=" senter p_t_20">
							<text>部门2</text>
						</view>
						<view class="quanxiana"></view>
					</view>
					<view>
						<view class="senter p_t_20">
							<text>部门3</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				change: '',
				list: [{
					txt: false
				}]
			}
		},
		methods: {
			getChecked(index) {
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].txt = false
					this.list[index].txt = true
				}

				console.log(index);
				console.log(this.list)
			},
			get() {
				this.show = !this.show
			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height: 100vh; */
		overflow: hidden;
		background-color: #fff;
	}

	.control-top {}

	.radio {
		width: 28rpx;
		height: 28rpx;
		display: inline-block;
		vertical-align: middle;
		margin-top:-20rpx;
	}
	.teaching-lan {
		width: 260rpx;
		height: 250rpx;
		opacity: 1;
		background: #ececec;
		border-radius: 8rpx;
		position: absolute;
		top:0rpx;
		left: 450rpx;
		z-index: 99;
	}
	.quanxiana {
		width: 258rpx;
		height: 2rpx;
		opacity: 1;
		border: 2rpx solid #e0e0e0;
		margin-top: 25rpx;
	}
</style>
